<template>
	<view class="order">
		<!-- <view v-if="hasLogin"> -->
		<!-- 导航 -->
		<u-navbar back-text="立即评价" :back-text-style="textStyle" back-icon-color="#000000" style="font-weight: bold;font-family: PingFang SC;"></u-navbar>
		<!-- <u-navbar back-icon-color="#000000" title="立即评价" title-color="#3F3F3F" :title-bold="true" :background="background"></u-navbar> -->
		<!-- end -->
		<view class="shop">
			<view class="shop_name" style="padding:12rpx 32rpx;">
				<image :src="entPortrait" mode=""></image>
				<view>{{entName}}</view>
			</view>
			<view class="allorder" v-if="taocan.chageType==5">
				<view class="orders">
					<view>
						<image :src="taocan.packageCover" mode="" class="order_img" style="width: 176rpx;height: 176rpx;"></image>
					</view>
					<view class="person">
						<view class="fenshu">
							{{taocan.packageName}}
						</view>
						<view class="fenshu" style="margin-top: 60rpx;">购买数量：{{taocan.amont}}</view>
						<view class="fenshu" style="margin-top: 10rpx;">金额：{{taocan.totalPay}}元</view>
					</view>
				</view>
			</view>
			<view class="allorder" v-if="taocan.chageType!=5">
				<view class="orders">
					<view>
						<image :src="employee.portrait" mode="" class="order_img"></image>
					</view>
					<view class="person">
						<view class="fenshu">
							<view class="usern">
								{{employee.name}}
							</view>
							<view class="rates" style="margin-left: 20rpx;">{{employee.score}}分</view>
						</view>
						<view class="style">
							<text>{{employee.age}}岁</text><text class="pad">{{employee.nativePlace}}人</text><text class="pad">服务{{employee.workYear}}年</text><text class="pad">{{employee.education}}学历</text>
						</view>
						<view class="goodAt">
							<view class="leis" v-for="(item,index) in goodAtList" :key="index">{{item}}</view>
						</view>
						<view style="float: right;font-size: 30rpx;color: #F29423;">{{employee.univalence}}{{employee.univalenceUnit}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="shop" style="padding: 0 40rpx;">
			<view class="texs">
				<text>评价：</text>
				<u-rate active-color="#F29423" inactive-color="#F29423" :count="count" v-model="value" @change="onChange"></u-rate>
				<view style="display: flex;margin-top: 20rpx;flex-wrap: wrap;" v-if="taocan.chageType!=5">
					<view v-for="(value,index) in infoArr" :key="index" :data-id="value.appraiseTagId" @tap="tapInfo(value.appraiseTagId,index)">
						<view class="service" :class="{'cur': rSelect.indexOf(index)!=-1}">
							{{value.title}}
						</view>
					</view>
				</view>
			</view>
			</view>
			<view class="line"></view>
			<view class="shop" style="padding: 0 40rpx;">
			<view class="texs">
				<textarea id="border" value="" placeholder="请描述对此次服务的评价~" v-model="comments"/>
				<view class="choose">
					<view class="item" v-for="(item,index) in imgList" :key='index'>
						<image :src="item" mode="" ></image>
						<image class="no" src="../../static/icon/no.png" mode="" @click="del(index)"></image>
					</view>
					<view class="xiuxiu">
					<view class="item" v-if="imgList.length < 6">
						<image src="../../static/icon/scss.png" mode="" @click="unphoto()"></image>
					</view>
					<view class="xiuer" v-if="imgList.length == 0">
						发几张照片来秀一秀吧~
					</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 100rpx;" ></view>
		<view class="footer">
			<view class="foot_mon">
					<u-button type="warning" shape="circle" @click="fabu()">发布评价</u-button>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background:{
					backgroundColor: '#fca800',
				},
				tabs: [{
						name: '全部',
						type: 'em'
					}, {
						name: '待确认',
						type: 'package'
					}, {
						name: '待支付',
						type: 'ez'
					},
					{
						name: '待服务',
						type: 'ef'
					},
					{
						name: '服务中',
						type: 'ew'
					},
					{
						name: '投诉中',
						type: 'et'
					},
					{
						name: '待评价',
						type: 'ep'
					},
				],
				goodAtList: [],
				count: 5,
				value: 0,
				rSelect: [],
				infoArr: [{
						id: 1,
						name: '家政'
					},
					{
						id: 2,
						name: '开锁'
					},
					{
						id: 3,
						name: '搬家'
					},
					{
						id: 4,
						name: 'haha'
					}
				],
				imgList:[],
				orderId:'',
				employee:'',
				tags:'',
				entName:'',
				entPortrait:'',
				rates:'',
				image_array:[],
				appraiseTagId:[],
				taocan:''
			};
		},
		onLoad(option) {
			this.orderId = option.orderId
			console.log(this.orderId ,"this.orderId ")
			this.getOrders();
		},
		methods: {
			onChange(e) {
			     console.log(e,"e")
				 this.rates = e
			},
			getAddress() {
				uni.navigateTo({
					url: '../personal/address'
				})
			},
			tapInfo(appraiseTagId,index) {
				console.log(appraiseTagId,index)
				this.appraiseTagId.push(appraiseTagId)
				if (this.rSelect.indexOf(index) == -1) {
					this.rSelect.push(index); //选中添加到数组里
				} else {
					this.rSelect.splice(this.rSelect.indexOf(index), 1); //取消
				}
			},
			unphoto(){
				var _this = this
				if (this.imgList.length < 6) {
					var _this = this;
					uni.chooseImage({
						count: 6,
						success: function(res) {
							var arr = [];
							for (var i in res.tempFilePaths) {
								_this.imgList.push(res.tempFilePaths[i]);
							}
							if (res.tempFilePaths.length > 6) {
								uni.showToast({
									icon: 'none',
									title: '最多上传6张图片',
									duration: 1000
								});
							}
						}
					});
				} else {
					uni.showToast({
						icon: 'none',
						title: '最多上传6张图片',
						duration: 1000
					});
				}
			},
			del(index) {
				uni.showModal({
					title: '提示',
					content: '是否要删除该图片',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(index, 1);
						}
					}
				});
			},
			
			getOrders(){
				var _this = this
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'orders/appraise/info'
				};
				let data = {
					orderId: _this.orderId
				};
				_this.http.httpTokenRequest(opts, data).then(res => {
					console.log(res.data)
					_this.taocan = res.data
					_this.employee = res.data.employee
					_this.entName = res.data.entName
					_this.entPortrait = res.data.entPortrait
					_this.goodAtList = res.data.employee.skills
					_this.infoArr = res.data.tags
				})
			},
			fabu(){
				var _this = this
				if(_this.imgList.length > 0){
					_this.image_array = []
					for (let k = 0; k < _this.imgList.length; k++) {
							uni.uploadFile({
								url: this.http.baseUrl +'/common/upload/batch',
								filePath: _this.imgList[k],
								name: 'file',
								fileType: 'image',
								success: (res) => {
									let url_href = JSON.parse(res.data).data[0];
									_this.image_array.push(url_href);
									if (_this.image_array.length == _this.imgList.length) {
										uni.hideLoading({
											title: '上传成功'
										})
										 _this.promotion()
									}
									
								}
							});
					}
				}else{
					 _this.promotion()
				}
			},
			promotion(){
				var _this = this
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'orders/add/appraise'
				};
				let data = {
					orderId: _this.orderId,
					score:_this.rates,
					comments:_this.comments,
					images:_this.image_array,
					tagIds:_this.appraiseTagId
				};
				_this.http.httpTokenRequest(opts, data).then(res => {
					if(res.code==200){
						_this.$refs.uToast.show({
							title: res.message,
							type: 'success'
						})
						let pages = getCurrentPages();  //获取所有页面栈实例列表
						let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
						prevPage.$vm.isMade = 1;
						setTimeout(function(){
							uni.navigateBack({
								delta:1,
							})
						},500)
					}else{
						_this.$refs.uToast.show({
							title: res.message,
							type: 'error'
						})
					}
				})
			},
		}
	};
</script>

<style scoped lang="scss">
	/* 导航 */
	.shop {
		// box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);margin: 36rpx 28rpx 0 26rpx;
		// border-radius: 10rpx;
	}

	.shop_name {
		display: flex;
		align-items: center;
	}

	.shop_name image {
		width: 52rpx;
		height: 52rpx;
		margin-right: 20rpx;
	}

	.line {
		border: 4rpx solid #E4E4E4;
	}

	.allorder {
		padding: 15rpx 40rpx 12rpx 40rpx;
	}

	.orders {
		display: flex;
	}

	.orders .order_img {
		width: 176rpx;
		height: 258rpx;
	}

	.person {
		padding-left: 30rpx;
		width: 520rpx;
	}

	.usern {
		font-size: 30rpx;
		color: #656565;
		font-weight: 500;
	}
	.fenshu {
		display: flex;
		align-items: center;
		// padding-top: 14rpx;
	}

	.rates {
		color: #F29423;
		font-size: 22rpx;
		margin-left: 12rpx;
		background-color: #FFF6EB;padding: 2rpx 10rpx;border-radius: 20rpx;
	}

	.style {
		padding-top: 8rpx;
		font-size: 26rpx;
		color: #3F3F3F;
		font-weight: 500;
	}

	.pad {
		padding-left: 18rpx;
	}

	.foot {
		padding: 4rpx 40rpx 160rpx 40rpx;
		font-family: PingFang SC;
	}

	.foot_name {
		display: flex;
		justify-content: space-between;
		padding-top: 30rpx;
		font-size: 26rpx;
		font-weight: 500;
	}

	.lei {
		color: #3F3F3F;
		font-weight: 500;
	}

	.footer {
		// position: fixed;
		// z-index: 99;
		// bottom: 0;
		width: 100%;
		// background: #FFFFFF;
		opacity: 1;
	}

	.foot_mon {
		text-align: center;
		padding: 38rpx 54rpx 32rpx 54rpx;
	}

	.write {
		font-size: 32rpx;
		font-weight: 500;
		margin-bottom: 22rpx;
	}

	.write text {
		font-size: 40rpx;
		color:#FCA800;
	}

	.goodAt {
		display: flex;
		flex-wrap: wrap;
		font-size: 22rpx;
		color: #F29423;
	}

	.leis {
		border: 1px solid #F29423;
		padding: 6rpx 10rpx;
		margin: 12rpx 12rpx 0 0;
		border-radius: 10rpx;
	}
	.texs{
		padding: 26rpx 20rpx;
	}
	.service {
		padding: 8rpx 18rpx;
		color: #979797;
		font-size: 26rpx;
		margin-right: 38rpx;
		border-radius: 10rpx;
		margin: 5rpx 20rpx 5rpx 0;
		background-color: #F2F2F2;
	}
	.cur {
		color: #FFFFFF;
		background-color: #FCA800;
		// border: 1px solid #FCA800 !important;
	}
	#border{
		width: 650rpx;
		height: 280rpx;
		font-size: 26rpx;
	}
	.choose{
		width: 100%;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		.item{
			width: 184rpx;
			height: 184rpx;
			position: relative;
			margin-right: 30rpx;
			margin-top: 20rpx;
			image{
				width: 100%;
				height: 100%;
			}
			.no{
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				top:-15rpx;
				right: -15rpx;
			}
		}
	}
	.xiuxiu{
		display: flex;
		align-items: center;
	}
	.xiuer{
		 margin-top: 35%;color: #CBCBCB;font-size: 26rpx;
	}
</style>
